import React, { Component } from "react";
import { Toast, Button, Modal, NoticeBar } from "antd-mobile";
import copy from "copy-to-clipboard";
const modalAlert = Modal.alert;
import yhTools from "@/tools/yh";
import { channelCode, InterfaceG } from "@/config/Config";
// 组件
import MainLayout from "@component/mainLayout/mainLayout";
import ActivityModal from "@component/activityModal";
import Banner from "@/views/viewCommon/Banner";
import GuideMask from './component/guideMask';
import XhbBannerSwiper from './component/xhbBannerSwiper';


import "./accountOpened.scss";

import rightIcon from "@images/imageXHB/b-ao-arrowright.png";
import iconDZZH from "@images/imageXHB/ic_dzzh@2x.png"; // 电子账户
import iconSZMX from "@images/imageXHB/ic_szmx@2x.png"; // 收支明细
import iconCCXQ from "@images/imageXHB/ic_ccxq@2x.png"; // 持仓详情
import iconXSZQ from "@images/imageXHB/ic_xszq@2x.png"; // 新手专区
import iconCJWT from "@images/imageXHB/ic_cjwt@2x.png"; // 常见问题
import iconGZW from "@images/imageXHB/ic_gzw@2x.png"; // 关注我icon-hua-tong-bank-logo.png
import footerLogo from "@images/xhf-logo.png"; // 底部logo
import huatong_logo from "@images/icon-hua-tong-bank-logo.png";
import eye_off_line from "@images/imageXHB/eye-off-line.png";
import eye_line from "@images/imageXHB/eye-line.png";



/**
 * 描述：小辉宝-余额-已开户
 * 作者：zenghq
 * 日期：2021-03-10
 */
class accountOpened extends Component {
	constructor(props) {
		super(props);
		this.state = {
			modal1: false, //公告弹窗
			boardTitle: "", //小辉宝公告标题
			boardContent: "", //小辉宝公告内容
			xhbBalanceAmt: "--",
			signStatus: "1",  //签约状态 0:签约 1:未签约
			signFrame: '0', //未签约弹框（0不弹框，1弹框）"
			electronicCardNo: '', //卡号
			hasHistoryStorage: "-1", //是否有历史存单 0:有历史存单 1:无历史存单,控制第二张引导页展示哪一张
			incomeAmts: "", //累计收益
			incomeAmtThisDay: "", //当日收益
			incomeAmtDate: "", //当日收益时间
			rechargeCardNum: "0",  //已获充值卡数量
			rechargeCardAmount: "0", //充值卡金额
			differRechargeCardAmt: "0", //与充值卡金额差值
			bannerList: [], // 轮播图
			guideMaskShow: false,  //展示引导页,是否第一次进入小辉宝
			activeVisible: false, //活动弹窗
			xhbAmtZero: false,  //充值弹窗
			showAmt: false,
			activeData: {
				popupImgUrl: 'https://jrcdn.yonghui.cn/yh_supermarket_sdk/yhLife/xhb/xhb_sign_modal.png',  //https://jrcdn.yonghui.cn/yh_supermarket_sdk/yhLife/xhb/xhb_congzhi_modal.png
			}, //活动数据
			buttonArray: [{
				target: '0',
				url: '/xhbBalanceNoSign',  // /rechargeAccount
				btnDesc: '立即参加', //立即存钱
			}],
		};
		this.navData = [
			{
				type: 1,
				img: iconDZZH,
				name: "电子账户",
				url: "/bankDetailPage"
			},
			{
				type: 1,
				img: iconSZMX,
				name: "收支明细",
				url: "/billRecord/2"
			},
			{
				type: 1,
				img: iconCCXQ,
				name: "持仓详情",
				url: "/depositDetail"
			},
			{
				type: 1,
				img: iconXSZQ,
				name: "新手专区",
				url: "/newbieZone"
			},
			{
				type: 2,
				img: iconGZW,
				name: "关注我",
				url: ""
			},
			{
				type: 1,
				img: iconCJWT,
				name: "常见问题",
				url: "/XhbPayHelp"
			}
		];
	}
	/*******************生命周期 start************************/
	componentDidMount() {
		this.init();
		this.getChannelBannerList();
		this.getNotice();
		//进入新首页的，是白名单内
		sessionStorage.setItem('isXhbWhite', 1);
	}
	componentWillUnmount() { }
	/*******************生命周期 end************************/
	init = () => {
		Toast.loading("加载中...", 100);
		let objs = {
			url: InterfaceG.balanceHomePageInit,
			params: {
				channelCode: channelCode
			},
			_alertShow: false
		};
		yhTools.request(objs).then(res => {
			const { message, code, data = {} } = res;
			if (code === "0") {
				Toast.hide();
				this.setState({
					openStatus: data.openStatus,
					electronicCardNo: data.electronicCardNo ? data.electronicCardNo.substr(-4) : '', //卡号
					xhbBalanceAmt: data.xhbBalanceAmt,
					signStatus: data.signStatus,  //签约状态 0:签约 1:未签约
					hasHistoryStorage: data.hasHistoryStorage, //是否有历史存单 0:有历史存单 1:无历史存单,控制第二张引导页展示哪一张
					incomeAmts: data.incomeAmts, //累计收益
					incomeAmtThisDay: data.incomeAmtThisDay, //当日收益
					incomeAmtDate: data.incomeAmtDate, //当日收益时间
					rechargeCardNum: data.rechargeCardNum,  //已获充值卡数量
					rechargeCardAmount: data.rechargeCardAmount, //充值卡金额
					differRechargeCardAmt: data.differRechargeCardAmt, //与充值卡金额差值
					guideMaskShow: data.firstIntoYhb,  //是否第一次进入小辉宝
					signFrame: data.signFrame, //未签约弹框（0不弹框，1弹框）"
					xhbAmtZero: data.xhbAmtZero,
				});

				if (!data.firstIntoYhb) {
					this.initModal();
				}
			} else {
				message && Toast.info(res.message, 2);
			}
		});
	};

	/**获取公告*/
	getNotice() {
		const params = {
			url: `/fm/boardInfo`,
			header: this.props.getAppPlatformsDatas,
			params: {
				boardType: "00",
				channelCode: '05',
				boardSubtype: "YHBY0100A"
			},
			_alertShow: false
		};
		yhTools.request(params).then(res => {
			if (res.code == "0") {
				const { data = [] } = res;
				const { boardContent = "" } = data[0] || {};
				const { boardTitle = "" } = data[0] || {};
				this.setState({
					boardContent,
					boardTitle
				});
			}
		});
	}

	initModal = () => {
		// //签约弹窗
		if (this.state.signFrame == '1') {
			this.setState({
				activeData: {
					popupImgUrl: 'https://jrcdn.yonghui.cn/yh_supermarket_sdk/yhLife/xhb/xhb_sign_modal.png',
				}, //活动数据
				buttonArray: [{
					target: '0',
					url: '/xhbBalanceNoSign',
					btnDesc: '立即参加',
				}],
				activeVisible: true
			})
		}
		//充值弹窗
		if (this.state.xhbAmtZero) {
			this.setState({
				activeData: {
					popupImgUrl: 'https://jrcdn.yonghui.cn/yh_supermarket_sdk/yhLife/xhb/xhb_congzhi_modal.png',
				}, //活动数据
				buttonArray: [{
					target: '0',
					url: '/rechargeAccount',
					btnDesc: '立即存钱',
				}],
				activeVisible: true
			})
		}
	}

	/*******************业务方法 start************************/
	//跳转页面
	jumpPage(url, Urlparams) {
		this.props.history.push({
			pathname: url,
			state: Urlparams
		});
	}
	/**广告轮播图 */
	getChannelBannerList = () => {
		let params = {
			url: InterfaceG.getBannerListByPageType,
			params: {
				pageType: "XHB_IS_SIGN_INDEX_PAGE"
			}
		};
		yhTools.request(params).then(res => {
			if (res.code === "0") {
				if (res.data && res.data.length > 0) {
					res.data.forEach(item => {
						if (item.bannerType == "XHB_IS_SIGN_ACTIVITY") {
							this.setState({
								bannerList: item.indexServerDtos ? item.indexServerDtos : []
							});
						}
					});
				}
			}
		});
	};
	/*******************业务方法 end************************/

	/*******************点击事件 start************************/
	goToPage = (url, type) => {
		console.log("url===", url);
		console.log("type===", type);
		if (type == 1) {
			this.jumpPage(url);
		} else if (type == 2) {
			modalAlert(
				"",
				"关注“永辉金融”公众号，优惠早知道！", //TODO 关注弹窗优惠券
				[
					{
						text: "取消"
					},
					{
						text: "复制公众号",
						onPress: () => {
							copy("永辉金融");
							Toast.success("复制成功，请前往微信中粘贴搜索并关注", 2);
						}
					}
				]
			);
		}
	};
	/**提现 */
	extractClick = () => {
		const { xhbBalanceAmt } = this.state;
		if (Number(xhbBalanceAmt) <= 0) {
			Toast.info("账户余额为0，无法提现");
			return;
		}
		this.props.history.push({
			pathname: "/WithdrawAccount",
			state: {
				statePrame: {
					backPath: "/xhbBalanceAccountOpened"
				}
			}
		});
	};

	/**充值 */
	rechargeClick = () => {
		this.props.history.push(`/rechargeAccount?from=xhbBalanceAccountOpened`);
	};
	/**金额点击去交易明细 */
	billingRecordsClick = () => {
		this.props.history.push(`/billRecord/2`);
	};

	onCloseAcitve = () => {
		this.setState({
			activeVisible: false
		});
	};

	handleCloseGuideMask = () => {
		this.setState({
			guideMaskShow: false,
		});
		const { openStatus, signStatus, xhbBalanceAmt } = this.state;
		this.initModal(openStatus, signStatus, xhbBalanceAmt);
	}

	handleGotoOpen = () => {
		this.props.history.push(`/xhbBalanceNoSign`);
	}

	/**
	* 关闭弹窗
	*/
	onClose = key => () => {
		this.setState({
			[key]: false
		});
	};
	/*******************点击事件 end************************/

	/**渲染 */
	render() {

		const _pageParams = {
			header: {
				title: "小辉宝",
				headerBackground: '#BC9A67',
				// newBackButt: true,
				// titleColor: '#302E2F',
				goToApp: true
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		const {
			xhbBalanceAmt = "0.00",
			bannerList,
			activeVisible,
			activeData,
			buttonArray,
			boardContent
		} = this.state;
		return (
			<MainLayout pageParams={_pageParams}>
				<div className="ballance_account_opended-content">
					<div className="xhb-account-opended-page-noticeBar">
						{boardContent && (
							<NoticeBar
								marqueeProps={{
									loop: true,
									style: { padding: "0 7.5px" }
								}}
								onClick={() => this.setState({ modal1: true })}
							>
								{yhTools.htmlDecodeToText(boardContent)}
							</NoticeBar>
						)}
					</div>
					<div className="content-box">
						{/* 头部卡片 */}
						<section className="account_opended-top-box">
							<div className="content-box">
								<div className="huatong-title">
									<div className="huatong-title-left">
										<img src={huatong_logo} alt="" />
										<span>华通银行</span>
									</div>
									<span className="title-number">尾号{this.state.electronicCardNo}</span>
								</div>
								<div className="sub-title text-c">
									电子账户余额(元)
									{this.state.showAmt && (<img className="eye_line" src={eye_line} alt="" onClick={() => { this.setState({ showAmt: false }) }} />)}
									{!this.state.showAmt && (<img className="eye_off_line" src={eye_off_line} alt="" onClick={() => { this.setState({ showAmt: true }) }} />)}
								</div>
								<div
									className="money text-c"
									onClick={this.billingRecordsClick}
								>
									<span>{this.state.showAmt ? xhbBalanceAmt : '******'}</span>
									<img src={rightIcon} />
								</div>
								<div className="buttons-box">
									<Button
										onClick={this.extractClick}
										className="button button-reset"
									>
										提现
									</Button>
									<Button
										onClick={this.rechargeClick}
										className="button button-reset"
									>
										存钱
									</Button>
								</div>
								{this.state.signStatus == "1" && (
									<div className="active-box" onClick={this.handleGotoOpen}>
										<div className="active">
											<div className="tag">限时</div>
										</div>
									</div>
								)}
								{this.state.signStatus == "0" && (
									<div className="swiper-banner-box">
										<XhbBannerSwiper
											{...this.props}
											data={{
												incomeAmts: this.state.incomeAmts, //累计收益
												incomeAmtThisDay: this.state.incomeAmtThisDay, //当日收益
												incomeAmtDate: this.state.incomeAmtDate, //当日收益时间
												hasHistoryStorage: this.state.hasHistoryStorage,
												rechargeCardNum: this.state.rechargeCardNum,
												rechargeCardAmount: this.state.rechargeCardAmount,
												differRechargeCardAmt: this.state.differRechargeCardAmt,
											}}
										/>
									</div>
								)}

							</div>
						</section>
						{/* 导航菜单 */}
						<section className="nav-box">
							{this.navData.map(item => {
								if (item.url == '/depositDetail' && this.state.hasHistoryStorage == '0') {
									return (
										<div
											onClick={() => {
												this.goToPage(item.url, item.type);
											}}
											key={item.name}
											className="nav-item"
										>
											<img className="img" src={item.img} alt="" />
											<div className="name">{item.name}</div>
											{item.url == '/depositDetail' && (<span className="tag" id="nav-tag-ccxq">总资产</span>)}
										</div>
									)
								} else if (item.url != '/depositDetail') {
									return (
										<div
											onClick={() => {
												this.goToPage(item.url, item.type);
											}}
											key={item.name}
											className="nav-item"
										>
											<img className="img" src={item.img} alt="" />
											<div className="name">{item.name}</div>
										</div>
									)
								}
							})}
						</section>

						{bannerList.length > 0 && (
							<section className="column-box">
								<div className="subtitle">精选活动</div>
								<div>
									<Banner
										bannerList={bannerList}
										history={this.props.history}
									/>
								</div>
							</section>
						)}
					</div>
					<div className="footer-box">
						<img src={footerLogo} />
					</div>
				</div>
				<GuideMask
					open={this.state.guideMaskShow}
					data={{
						signStatus: this.state.signStatus,
						hasHistoryStorage: this.state.hasHistoryStorage,
						rechargeCardNum: this.state.rechargeCardNum,
						rechargeCardAmount: this.state.rechargeCardAmount,
						differRechargeCardAmt: this.state.differRechargeCardAmt,
						boardContent: this.state.boardContent //公告，用于计算遮罩高度
					}}
					close={this.handleCloseGuideMask}
				/>
				<ActivityModal
					activeVisible={activeVisible}
					onCloseAcitve={this.onCloseAcitve}
					activeData={activeData}
					buttonArray={buttonArray}
					history={this.props.history}
					btnContStyles={{
						marginTop: '-0.9rem'
					}}
					btnStyles={{
						background: 'linear-gradient(90deg, #FF4440, #FF3232)',
						color: '#FFFFFF'
					}}
				/>
				<Modal
					visible={this.state.modal1}
					transparent
					maskClosable={false}
					onClose={this.onClose("modal1")}
					title={this.state.boardTitle}
					footer={[
						{
							text: "确定",
							onPress: () => {
								console.log("ok");
								this.onClose("modal1")();
							}
						}
					]}
				>
					{
						<div
							className="board-content-box"
							style={{ textAlign: "left" }}
							dangerouslySetInnerHTML={{
								__html: this.state.boardContent
							}}
						></div>
					}
				</Modal>
			</MainLayout>
		);
	}
}

export default accountOpened;
